<template>
	<view>
		<view class="uni-flex-center">
			<view class="uni-padding-wrap">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
		</view>
		<view class="repair-order-content">
			<uni-card v-for="(item, index) in list" :key="index" :title="item.typename" :extra="items[current]">
				<view class="notice-card">
					<view class="image">
						<image style="width: 110px;height: 110px;" :src="item.images" mode="aspectFill"></image>
					</view>
					<view class="content">
						<view class="header uni-ellipsis">{{item.faultdp}} </view>
						<view class="content">
							{{item.name}}
						</view>
						<view class="foot">{{item.createTime}}</view>
					</view>
				</view>
			</uni-card>
			<view class="uni-empty" v-if="list.length == 0">{{ loadingText }}</view>
		</view>
		<!-- 数据列表 -->
	</view>
</template>

<script>
	import uniCard from '@/components/uni-card/uni-card.vue';
	import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
	import {
		queryByStatus
	} from '@/api/repair.js'
	export default {
		components: {
			uniCard,
			uniSegmentedControl
		},
		data() {
			return {
				loadingText: '暂无数据',
				//待处理 2处理中 3已办结
				items: ['待处理', '处理中', '已办结'],
				activeColor: '#ed7a30',
				current: 0,
				styleType: 'text',
				list: []
			};
		},
		computed: {},
		onShow() {},
		onReachBottom: function() {
			// console.log('我触底了要加载数据了: ' + JSON.stringify('我触底了要加载数据了'));
		},
		methods: {
			onClickItem(index) {
				console.log(index);
				if (this.current !== index) {
					this.current = index;
					this.getRepairlist();
				}
			},
			getDetail(item) {
				uni.navigateTo({
					url: '/pages/user/repair-order/detail?data=' + JSON.stringify(item.id)
				});
			},
			getRepairlist() {
				this.list = [];
				queryByStatus(this.current + 1).then(res => {
					this.list = res;
				})
			}
		},
		onLoad() {
			this.getRepairlist();
		}
	};
</script>

<style scoped>
	.uni-flex-center {
		background: #ffffff;
		position: fixed;
		top: 40px;
		width: 100%;
		z-index: 999;
	}

	.uni-padding-wrap {
		width: 90%;
		padding: 0;
		/* margin: 10upx; */
	}

	.repair-order-content {
		margin-top: 100upx;
	}

	.order-content {
		height: 180upx;
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		word-break: break-all;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 4;
		/** 显示的行数 **/
		overflow: hidden;
	}

	.notice-card {
		background: #ffffff;
		border-radius: 10upx;
		margin: 20upx;
		width: 100%;
		height: 120px;
		display: flex;
	}

	.notice-card .image {
		width: 25%;
		margin: 5px 0px;
	}

	.notice-card .content {
		width: 75%;
		height: 100%;
	}

	.notice-card .content .header {
		float: left;
		height: 25%;
		padding-left: 10upx;
		margin-left: 10px;
		border-left: 8upx solid #ff0000;
		overflow: hidden;
	}


	.notice-card .content .content {
		width: 100%;
		height: 55%;
		font-size: 20upx;
		color: #898989;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 6;
		-webkit-box-orient: vertical;
	}

	.notice-card .content .foot {
		height: 25%;
		color: #898989;
		font-size: 20upx;
		text-align: right;
	}
</style>
